<template>
  <div class="min-h-screen flex flex-col">
    <Header @scroll-to="handleScroll" />
    
    <main class="flex-1 w-full px-4 py-8">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 mb-12">
        <ApiDemo />
        <Calculator />
      </div>
      
      <SystemInfo class="mb-12" />
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6 mb-12">
        <FeatureCard 
          title="PyWebView" 
          icon="window-maximize" 
          color="blue"
          description="轻量级桌面应用框架，提供原生窗口和系统API集成"
        />
        <FeatureCard 
          title="FastAPI" 
          icon="server" 
          color="indigo"
          description="高性能Python后端框架，自动生成API文档"
        />
        <FeatureCard 
          title="Vue3" 
          icon="code" 
          color="purple"
          description="现代前端框架，提供响应式和组件化开发体验"
        />
      </div>
    </main>
    
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import ApiDemo from '@/components/ApiDemo.vue'
import Calculator from '@/components/Calculator.vue'
import SystemInfo from '@/components/SystemInfo.vue'
import FeatureCard from '@/components/FeatureCard.vue'

const handleScroll = (id) => {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}
</script>